import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
import { toAddressListPage } from '@/utils/page_router'

interface IProps {
  item: string // 选择的优惠券
  list: Array<Object> //  优惠券列表
  isOpened: boolean //  显示隐藏
  onClose: Function //  取消事件
  onConfirm: Function //  确定选择优惠券
}

export default class AddressSheet extends Component<IProps, {}> {
  props: any
  static options = {
    addGlobalClass: true
  }

  /**
   * 确定选择
   */
  onConfirm(i) {
    const { onClose, onConfirm } = this.props
    onClose()
    onConfirm(i)
  }

  render() {
    const { item={}, list=[], isOpened, onClose } = this.props
    // @ts-ignore
    return (<View className='address-select' catchtouchmove>
      <View className={classNames('fy-transition fade fy-mask', isOpened && 'show')} onClick={() => onClose()}/>
      <View className={classNames('fy-transition slide-bottom fy-popup fy-popup--bottom fy-popup--round', isOpened && 'show')}>
        <View className='address-head d-f a-i-c j-c-c'>
          <View className='head-title'>选择地址</View>
          <View className='bnn-icon close-icon' onClick={() => onClose()}>&#xe646;</View>
        </View>
        <ScrollView scrollY className='address-list'>
          {list.map(i => {
            return (<View key={i.id} className={classNames('address-item', i.id === item.id && 'active')}  hoverClass='hover-class--btn' onClick={this.onConfirm.bind(this, i)}>
              <View className='address-box d-f f-d-c j-c-c thin-border__b'>
                <View className='user-name t-o-e'>{i.name}</View>
                <View className='address-text t-o-e'>{i.city}{i.detail}</View>
                {i.id === item.id && <View className='bnn-icon select-icon'>&#xe645;</View>}
              </View>
            </View>)
          })}
        </ScrollView>
        <View className='select-box'>
          <View className='select-btn f-g-5' onClick={() => toAddressListPage()}>选择其他地址</View>
        </View>
      </View>
    </View>)
  }
}
